<template>
  <div class="productSupplierList w100p h100p">
    <van-search v-model="value" show-action placeholder="请输入供应商名称" @search="onSearch" @cancel="onCancel" />
    <div class="flb bgWH headerTitle">
      <div class="total l20">
        <span>共</span>
        <span class="cYE mr2 ml2 f16">{{ productSupplierList.length }}</span>
        <span>个供应商</span>
      </div>
      <div class="cYE f14 l20" @click="showProductSupplierPopup({}, 'add')">+添加供应商</div>
    </div>
    <div class="content">
      <div class="contentBox">
        <div v-for="(el, index) in productSupplierList" :key="index" class="contentItem" @click="showProductSupplierPopup(el, 'update')">
          <van-swipe-cell>
            <van-cell :title="el.productSupplierName" />
            <template #right>
              <van-button square type="danger" text="删除" @click.stop="delProductSupplierInfo(el.id)" />
            </template>
          </van-swipe-cell>
          <van-divider />
        </div>
      </div>
    </div>
    <van-popup v-model="showProductSupplier" round position="bottom">
      <van-form class="oyauto w100p" @submit="updateProductSupplierInfo">
        <div class="flc mt10">
          <van-cell-group inset>
            <van-field v-model="productSupplierInfo.productSupplierName" name="供应商" label="供应商" placeholder="供应商" :rules="[{ required: true, message: '请填写供应商' }]" />
          </van-cell-group>
        </div>
        <div style="margin: 16px;">
          <van-button color="#409eff" round block type="primary" native-type="submit">{{ productSupplierStatus === 'add' ? '添加' : '更新' }}</van-button>
        </div>
      </van-form>
    </van-popup>
  </div>
</template>
<script>
import pinyin from 'js-pinyin';
import { addProductSupplier, deleteProductSupplier, updateProductSupplier, getAllProductSupplier } from '../utils/api'
export default {
  data() {
    return {
      value: '',
      productSupplierList: [],
      productSupplierListOrg: [],
      showProductSupplier: false,
      productSupplierInfo: {},
      productSupplierStatus: 'add'
    }
  },
  mounted() {
    this.getProductSupplierList()
  },
  methods: {
    getPingyin(name) {
      return pinyin.getCamelChars(name);
    },
    onSearch() {
      this.productSupplierList = this.productSupplierListOrg.filter(item => item.productSupplierName.indexOf(this.value) !== -1)
    },
    onCancel() {
      this.productSupplierList = this.productSupplierListOrg
    },
    // 弹框-增/改
    showProductSupplierPopup(item, type) {
      this.productSupplierInfo = JSON.parse(JSON.stringify(item))
      this.productSupplierStatus = type
      this.showProductSupplier = true
    },
    //增/改
    async updateProductSupplierInfo() {
      this.showProductSupplier = false
      if (this.productSupplierStatus === 'add') {
        await addProductSupplier({ ...this.productSupplierInfo })
        this.$toast.success('供应商信息添加成功！')
      } else {
        await updateProductSupplier({ ...this.productSupplierInfo })
        this.$toast.success('供应商信息更新成功！')
      }
      this.getProductSupplierList()
    },
    //删
    async delProductSupplierInfo(id) {
      await this.$async.confirm({ message: '确认要删除供应商信息吗？' })
      await deleteProductSupplier({ id })
      this.$toast.success('供应商信息删除成功！')
      this.getProductSupplierList()
    },
    //查
    async getProductSupplierList() {
      let res = await getAllProductSupplier()
      res.data.forEach(el => {
        el.sort = this.getPingyin(el.productSupplierName);
      });
      res.data.sort((a, b) => a.sort.localeCompare(b.sort));
      this.productSupplierList = res.data
      this.productSupplierListOrg = res.data
    }
  }
}
</script>
<style lang="less" scoped>
.productSupplierList {
  .content {
    padding-top: 8px;
    height: calc(100% - 86px);
    box-sizing: border-box;
    .contentBox {
      height: 100%;
      overflow-y: auto;
      .contentItem {
        width: 100%;
        height: 44px;
        box-sizing: border-box;
        background: white;
        .group {
          /deep/ .van-cell {
            padding: 4px 16px !important;
          }
        }
      }
    }
  }
}
</style>
